<template>
  <el-container class="wrapper">
    <el-header class="top-header">
      <div class="left-header">
        <div class="flex items-center text-black" @click="handleAsideChange">
          <app-icon icon="ant-design:menu-fold-outlined" class="text-2xl cursor-pointer" />
        </div>
        <div class="site-title">无道后台管理系统</div>
      </div>
      <div class="right-header">
        <el-dropdown trigger="click" size="small" @command="handleSelect">
          <span class="el-dropdown-link">
            <el-avatar
              :size="30"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit-password">忘记密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="main">
      <el-aside class="left-aside" :width="asideWidth">
        <el-menu
          default-active="2"
          class="left-menu"
          :collapse="collapse"
          @select="handleMenuChange"
        >
          <el-menu-item index="1">
            <el-icon><setting /></el-icon>
            <span>控制面板</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><user-filled /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="2-1">
              <span>用户列表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import AppIcon from '@/components/common/AppIcon.vue';
  const asideWidth = ref('200px');
  import { Setting, UserFilled } from '@element-plus/icons';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';

  const collapse = computed(() => {
    return asideWidth.value !== '200px';
  });

  const handleAsideChange = () => {
    asideWidth.value = asideWidth.value === '200px' ? '60px' : '200px';
  };
  const router = useRouter();
  const handleMenuChange = (index: string) => {
    switch (index) {
      case '1':
        router.push({ name: 'Dashboard' });
        break;
      case '2-1':
        router.push({ name: 'UserList' });
        break;
    }
  };
  const handleSelect = (c: string) => {
    switch (c) {
      case 'logout':
        router.push({ name: 'Login' });
        ElMessage.info('退出成功');
        break;
      default:
        break;
    }
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    @apply h-full w-full;
  }
  .top-header {
    @apply bg-gray-100 flex items-center justify-between;
    .left-header {
      @apply flex;
      .site-title {
        @apply font-bold ml-3 text-lg select-none;
      }
    }
  }
  .main {
    height: calc(100% - 60px);
    @apply overflow-y-auto;
    .left-aside {
      /* @apply transition-all; */
      .left-menu {
        @apply h-full overflow-x-hidden;
      }
    }
  }
  /*.left-aside {
    @apply h-full bg-gray-100 flex flex-col;
    .aside-logo {
      @apply text-center h-10 select-none;
      .text {
        @apply text-center text-base font-bold py-2 px-4 bg-gray-700 text-white;
      }
    }
    .aside-menus {
      height: calc(100% - 2.5rem);
      overflow-y: auto;
      overflow-x: hidden;
    }
  } */
  /*.right-wrapper {
    @apply flex-1;
    .right-header {
      @apply bg-indigo-200 flex items-center justify-between;
      .header-left {
        @apply flex;
      }
      .header-right {
        @apply flex;
      }
    }
    .right-main {
      @apply bg-green-300;
    }
  } */
</style>
